<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
       
        /* 自定义字体关键词 */
        @font-face {    
            /* 自定义字体的名称 */
            font-family: "clockIcon";   
            /* 自定义字体的路径 */
            src: url(../font/clockicons.woff2);
        }
        .clockBox{
            width: 200px;
            padding: 10px;
            border: 1px dashed #333;
            border-radius: 4px;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .clockTime{
            font-size: 32px;
            line-height: 32px;
            height: 32px;
            margin: 10px auto;
            font-family: "clockIcon";
        }
    </style>
</head>
<body>
    <div class="clockBox">
        <div class="clockTitle">现在时间</div>
        <div class="clockTime"></div>
        <div class="clockDate">2021年10月12日</div>
    </div>
</body>
<script>
    // document.getElementsByClassName()  在文档中通过class名获取元素 => 放到集合(数组)中
    // 注意:由于操作元素的只有元素本身 => 后面需要通过下标取值 

   /*  var result = document.getElementsByClassName("clockTime");
    console.log(result);
    var clockTime = result[0];
    console.log(clockTime); */

    var clockTime = document.getElementsByClassName("clockTime")[0];
    var clockDate = document.getElementsByClassName("clockDate")[0];

    showClock();
    setInterval(showClock,1000);

    function showClock(){
        var date = new Date();  //日期对象
        console.log(date);
        
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var day = date.getDate();

        var week = date.getDay(); // 0-6
        var weekList = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];

        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();

        clockTime.innerText = `${beauty(hour)}:${beauty(minute)}:${beauty(second)}`;
        clockDate.innerText = `${year}年${beauty(month)}月${beauty(day)}日 ${weekList[week]}`;
    }

    function beauty(num) {
        return num < 10 ? "0" + num : num;
    }

</script>
</html>